<!--
 * @Author: 徐建辰
 * @Date: 2022-02-16 09:03:03
 * @LastEditTime: 2022-02-16 15:23:25
 * @LastEditors: 徐建辰
 * @Description: 
-->
<template>
  <div class="order-detail">
    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>{{ detail.orderStatusString }}</span>
      </div>
      <div class="status-item">
        <label>订单编号：</label>
        <span>{{detail.orderNo}}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{detail.createTime}}</span>
      </div>
      <van-button v-if="detail.orderStatus == 3" style="margin-bottom: 15px" :color="primaryColor" block>确认收货</van-button>
      <van-button v-if="detail.orderStatus == 0" style="margin-bottom: 15px" :color="primaryColor" block @click="showPay">去支付</van-button>
      <van-button v-if="!(detail.orderStatus < 0 || detail.orderStatus == 4)" type="danger" block @click="handleCancelOrder">取消订单</van-button>
    </div>
    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span>¥ {{ detail.totalPrice }}</span>
      </div>
      <div class="price-item">
        <label>配送方式：</label>
        <span>普通快递</span>
      </div>
    </div>
    <van-card
      v-for="item in detail.newBeeMallOrderItemVOS"
      :key="item.goodsId"
      style="background: #fff"
      :num="item.goodsCount"
      :price="item.sellingPrice"
      desc="全场包邮"
      :title="item.goodsName"
      :thumb="$filters.imgPrefix(item.goodsCoverImg)"
    />
    <PayPopup v-model="visible" :orderNo="detail.orderNo" :isInit="true" />
  </div>
</template>

<script setup>
import {ref, defineAsyncComponent} from 'vue'
import {useRoute} from 'vue-router'
import useOrder from '@/hooks/useOrder'
import useThemeStore from '@/store/theme'

const PayPopup = defineAsyncComponent(() => import('@/components/PayPopup'))

const {detail, handleCancelOrder} = useOrder(useRoute())
const {primaryColor} = useThemeStore()

const visible = ref(false)

function showPay() {
  visible.value = true
}
</script>

<style lang="less" scoped>
@import '@/assets/style/var.less';

.order-detail {
  background: #f7f7f7;
  .order-status {
    background: @background;
    padding: 20px;
    font-size: 15px;
    .status-item {
      margin-bottom: 10px;
      label {
        color: @color-text-s;
      }
    }
  }
  .order-price {
    background: @background;
    margin: 20px 0;
    padding: 20px;
    font-size: 15px;
    .price-item {
      margin-bottom: 10px;
      label {
        color: @color-text-s;
      }
    }
  }
  .van-card {
    margin-top: 0;
  }
  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>